<template>
  <div class="app-container">
    <el-row class="row bg-white">
      <el-table :data="list"  element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label='充值人' >
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="企业/个人"  align="center">
          <template slot-scope="scope">
            {{scope.row.group_name_cn}}
          </template>
        </el-table-column>
        <el-table-column label="身份证号码"  align="center">
          <template slot-scope="scope">
            {{scope.row.idcard}}
          </template>
        </el-table-column>
        <el-table-column label="手机号码"  align="center">
          <template slot-scope="scope">
            {{scope.row.phone}}
          </template>
        </el-table-column>
        <el-table-column label="扣费状态"  align="center">
          <template slot-scope="scope">
            {{scope.row.status_str}}
          </template>
        </el-table-column>
        <el-table-column label="扣费金额" align="center">
          <template slot-scope="scope">
            {{scope.row.amount}}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import { expenseRecord } from '@/api/payment'

export default {
  name: 'expense',
  data() {
    return {
      list: [],
      total: null,
      listQuery: {
        page: 1,
        pageSize: 20
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getList() {
      expenseRecord(this.listQuery).then(response => {
        if (response.code === 1) {
          this.list = response.data.list
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        }
      })
    }
  }
}
</script>

